 <template>
  <div style="background-color:#f1faff; padding: 20px;">
    <div class="container">
      <h3>部门管理
        <span class="completed">1/</span>
        <span class="going">3/</span>
        <span class="unstart">1</span>
      </h3>
      <a-tooltip title="3 done / 3 in progress / 4 to do">
        <a-progress :percent="60" :success-percent="30" :strokeWidth="6" />
      </a-tooltip>
      <div v-for="item in tasks" :key="item.title">
        <Card :title="item.title" :status="item.status" :completeTime="item.completeTime" :statusId="item.statusId" />
      </div>
      <AddTask />
    </div>

  </div>
</template>
<script>
export default {
  name: 'taskcard',
  props: {
    title: {
      type: String,
      defadult: '全部任务'
    }
  },
  data () {
    return {
      tasks: [
        {
          title: '这是一个什么任务',
          status: '已完成',
          statusId: 'completed',
          completeTime: '2021.06.20'
        },
        {
          title: '今天要开会',
          status: '进行中',
          statusId: 'going',
          completeTime: '2021.07.01'
        },
        {
          title: '测试会议',
          status: '进行中',
          statusId: 'going',
          completeTime: '2021.07.02'
        },
        {
          title: '部门大比赛',
          status: '未开始',
          statusId: 'unstart',
          completeTime: '2021.07.20'
        }
      ]
    }
  },
  components: {
    Card: () => import('@/components/card'),
    AddTask: () => import('@/components/addTask')
  }
}
</script>

<style lang="css" scoped>
.container {
  background-color: rgb(255, 255, 255);
  border-radius: 4px;
  padding: 10px;
  width: 330px;
}
h3 {
  text-align: left;
}
.completed {
  color: #3dd1ae !important;
}
.going {
  color: #ffc541 !important;
}
.unstart {
  color: #ff5b57;
}
</style>
